<template>
    <div v-if="list.length > 0">
        <div v-for="(item, index) of list" :key="index">
            <div class="item">
                <input type="checkbox" v-model="list[index].complete" />
                {{ item.title }}
                <button @click="del(item, index)">删除</button>
            </div>
        </div>
    </div>
    <div v-else>暂无任务</div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import { useStore } from "vuex";
export default defineComponent({
    name: "navMain",
    props: {
        list: {
            type: Array,
            required: true,
        },
    },
    emits: ["del"],
    setup(props, ctx) {
        //删除任务
        let check = false;
        let del = (item, index) => {
            ctx.emit("del", index);
            console.log(item, index);
        };
        return {
            del,
        };
    },
});
</script>
<style lang="less" scoped>
.item {
    width: 500px;
    height: 30px;
    line-height: 30px;
    position: relative;
    button {
        position: absolute;
        top: 5px;
        right: 0;
    }
}
.item:hover {
    background-color: #ddd;
}
</style>
